<template>
	<view class="mask-content" hover-stop-propagation :style="[maskStyle, zoomStyle]" @tap="click" :class="{'mask-show': show, 'mask-zoom': zoom}">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'componentMask',
		data() {
			return {
				zoomStyle: {
					transform: ''
				},
				scale: 'scale(1.2, 1.2)'
			}
		},
		props: {
			show: Boolean,
			zIndex: {
				type: [Number, String],
				default: ''
			},
			customStyle: {
				type: Object,
				default() {
					return {}
				}
			},
			zoom: {
				type: Boolean,
				default: true
			},
			duration: {
				type: [Number, String],
				default: 300
			},
			backgroundColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.6)'
			},
			maskClickAble: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			show(to) {
				if (to && this.zoom) {
					this.zoomStyle.transform = 'scale(1, 1)'
				} else if(!to && this.zoom) {
					this.zoomStyle.transform = this.scale
				}
			}
		},
		computed: {
			maskStyle() {
				let style = {}
				style.backgroundColor = this.backgroundColor
				if (this.show) {
					style.zIndex = this.zIndex ? this.zIndex : this.$g.zIndex.mask
				} else {
					style.zIndex = -1
				}
				style.transition = `all ${this.duration / 1000}s ease-in-out`
				if (Object.keys(this.customStyle).length) {
					style = {
						...style,
						...this.customStyle
					}
				}
				return style
			}
		},
		methods: {
			click() {
				if (!this.maskClickAble) return
				this.$emit('click')
			}
		}
	}
</script>

<style scoped lang="scss">
	.mask-content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		transition: transform 0.3s;
		&.mask-show {
			opacity: 1;
		}
		&.mask-zoom {
			transform: scale(1.2, 1.2);
		}
	}
</style>
